<template>
	<view>

		<view class="card_desc">*请确保是本人银行卡，用于提现</view>
		<view class="card_box">
			<view class="card_list">
				<view>开户行</view>
				<input type="text" placeholder="请输入开户行" v-model="form.bank"></input>
				<!-- <picker @change="bindPickerChange" :value="index" :range="array" >
		                            <view class="uni-input">{{array[index]}}</view>
		                        </picker> -->
			</view>
			<view class="card_list">
				<view>持卡人</view>
				<input type="text" placeholder="请输入持卡人姓名" v-model="form.name"></input>
			</view>
			<view class="card_list">
				<view>卡号</view>
				<input type="number" maxlength="19" placeholder="请输入银行卡卡号" v-model="form.card"></input>
			</view>
		</view>
		<view class="card_box">
			<view class="card_list">
				<view>手机号</view>
				<input type="number" placeholder="请输入银行预留手机号" v-model="form.mobile"></input>

			</view>

		</view>
		<view class="card_text">*请确保姓名，银行开户人为同一人</view>
		<view class="card_btn" @click="add">添加银行卡</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				array: ['中国', '美国', '巴西', '日本'],
				index: 0,
				form:{
					bank:'',
					name:'',
					card:'',
					mobile:''
				}
			}
		},
		methods: {
			add() {
				for(let i in this.form){
					if(!this.form[i]){
						return this.$Toast('请填写完所有信息后再提交');
					}
				}
				let validateBankCard = /^([1-9]{1})(\d{14}|\d{18})$/;
				if(!validateBankCard.test(this.form.card)){
					return this.$Toast('请输入正确的银行卡');
				}
				let reg = /^[1][3,5,7,8][0-9]\d{8}$/;
				if (!reg.test(this.form.mobile)) {
					return this.$Toast('请输入正确的手机号');
				}
				this.$post(this.$api.bAdd, this.form, (res) => {
					let {
						data
					} = res;
					console.log(data);
					if(data.code==1){
						this.$Toast('添加银行卡成功');
						setTimeout(()=>{
							uni.navigateBack()
						},1000)
					}else{
						this.$Toast(data.msg)
					}
				})
			}
		}
	}
</script>

<style scoped>
	page {
		background: #F8F8F8;
	}

	.card_desc {
		height: 85rpx;
		padding: 0 30rpx;
		line-height: 85rpx;
		font-size: 26rpx;
		color: #999999;
	}

	.card_box {
		background: #fff;
		padding: 0 30rpx;
		margin-bottom: 16rpx;
	}

	.card_list {
		display: flex;
		align-items: center;
		border-bottom: 1rpx solid #eee;
		height: 88rpx;
	}

	.card_list view {
		font-size: 30rpx;
		color: #333333;
		width: 3rem;
		margin-right: 50rpx;
	}

	.card_list input {
		font-size: 26rpx;
		color: #999999;
		flex: 1;
	}

	.card_list .picker {
		font-size: 26rpx;
		color: #999999;
		width: 100%;
	}

	.card_list text {
		width: 160rpx;
		height: 40rpx;
		background: #FFE048;
		border-radius: 20rpx;
		text-align: center;
		line-height: 40rpx;
		display: inline-block;
		font-size: 22rpx;
		color: #333333;
	}

	.card_text {
		height: 82rpx;
		line-height: 82rpx;
		font-size: 22rpx;
		color: #FF0000;
		padding: 0 30rpx;
		background: #fff;
	}

	.card_btn {
		width: 640rpx;
		height: 90rpx;
		line-height: 90rpx;
		text-align: center;
		margin: 180rpx auto 0;
		background: #FF7133;

		border-radius: 45rpx;
		font-size: 36rpx;
		color: white;
	}
</style>
